<script setup>
const navList = [
    {
        title: "首页",
        link: "/",
        name: "index",
    },
    {
        title: "关于我们",
        link: "/about",
        name: "about",
    },
    {
        title: "产品中心",
        link: "/product",
        name: "product",
    },
    {
        title: "优质案例",
        link: "/case",
        name: "case",
    },
    {
        title: "新闻资讯",
        link: "/news",
        name: "news",
    },
    {
        title: "联系我们",
        link: "/contact",
        name: "contact",
    },
];
const route = useRoute();
const routeName = ref(route.name);
</script>
<template>
    <div class="header">
        <nav>
            <NuxtLink
                class="nav-item"
                v-for="item in navList"
                :to="item.link"
                @click="routeName = item.name"
            >
                <span :class="{ active: routeName === item.name }">
                    {{ item.title }}
                </span>
            </NuxtLink>
        </nav>
    </div>
</template>
<style lang="scss" scoped>
.header {
    position: sticky;
    top: 0;
}
nav {
    display: flex;
}

.nav-item {
    height: 80px;
    line-height: 80px;
    width: 120px;
    text-align: center;
    background: pink;
    color: #fff;
}
.active {
    color: $primary;
}
</style>
